<script setup>
import { ref, onMounted } from 'vue'
import { Edit, Delete, Plus } from '@element-plus/icons-vue'

onMounted(() => {
    getBattery()
})

const getBattery = async () => {
    //初始化
    let first = function (callback) {
        var c1 = new cloud.Cloud({
            //必填，表示是未登录模式
            identityless: true,
            //资源方 AppID
            resourceAppid: 'wx026afb68a8e326e4',
            //资源方环境 ID
            resourceEnv: 'djcx-ak88-3gjvcbn22ca54f8e',
        })
        c1.init()
        //回调
        callback(c1)
    };
    //完成初始化后再回调，即可访问云数据库
    let callback = function (c1) {
        // 我个人不喜欢写云函数，所以直接写在Web这里做操作
        // 你要访问的各种操作写在这个callback函数里即可，这里以查询users表为例
        const db = c1.database();
        db.collection('battery').get({
            success: res => {
                // console.log(res.data)
                tableData.value = res.data
                // console.log(tableData.value)
            },
            fail: res => {
                console.log(res);
            }
        })
    };
    first(callback);
}
const tableData = ref([])



const formInline = ref({
    battery: '',
})

const search = () => {
    tableData.value = tableData.value.filter(item =>
        item.battery === formInline.value.battery
    )
    // console.log(res)
}

const dialogFormVisible = ref(false)
const form = ref({
    _id: '',
    id: '',
    size: '',
    weight: '',
    yajin: '',
    voltage: ''
})

const editMessage = (row) => {
    console.log(row)
    dialogFormVisible.value = true
    form.value = row
}

const check = () => {
    console.log(form.value)
    //初始化
    var c1 = new cloud.Cloud({
        //必填，表示是未登录模式
        identityless: true,
        //资源方 AppID
        resourceAppid: 'wx026afb68a8e326e4',
        //资源方环境 ID
        resourceEnv: 'djcx-ak88-3gjvcbn22ca54f8e',
    })
    c1.init({
        env: "djcx-ak88-3gjvcbn22ca54f8e"
    })

    c1.callFunction({
        name: 'editDianchi',
        data: {
            _id: form.value._id,
            id: form.value.id,
            size: form.value.size,
            weight: form.value.weight,
            voltage: form.value.voltage,
            yajin: form.value.yajin
        },
        success: res => {
            console.log(res);
            // tableData.value = []
            getBattery()
        },
        fail: res => {
            console.log(res);
        }
    })
    dialogFormVisible.value = false
}

const dialogFormVisible2 = ref(false)
const form2 = ref({
    city: '',
    type: '',
    yajin: '',
    taocan: [{
        price: '2',
        time: '2'
    }]
})
const indexs = ref(0)
const prop = ref({})
const editMessage2 = (row, $index, props) => {
    // console.log(row)
    dialogFormVisible2.value = true
    form2.value = row
    indexs.value = $index
    prop.value = props
}

const check2 = () => {
    // console.log(indexs.value, prop.value)
    prop.value.cityprice[indexs] = form2.value
    //初始化
    var c1 = new cloud.Cloud({
        //必填，表示是未登录模式
        identityless: true,
        //资源方 AppID
        resourceAppid: 'wx026afb68a8e326e4',
        //资源方环境 ID
        resourceEnv: 'djcx-ak88-3gjvcbn22ca54f8e',
    })
    c1.init({
        env: "djcx-ak88-3gjvcbn22ca54f8e"
    })

    c1.callFunction({
        name: 'editcityprice',
        data: {
            id: prop.value._id,
            cityprice: prop.value.cityprice
        },
        success: res => {
            console.log(res);
            getBattery()
        },
        fail: res => {
            console.log(res);
        }
    })
    dialogFormVisible2.value = false
}

const del2 = ($index, props) => {

    // console.log($index, props.ebike)
    props.cityprice.splice($index, 1)
    // console.log(props.ebike)
    //初始化
    var c1 = new cloud.Cloud({
        //必填，表示是未登录模式
        identityless: true,
        //资源方 AppID
        resourceAppid: 'wx026afb68a8e326e4',
        //资源方环境 ID
        resourceEnv: 'djcx-ak88-3gjvcbn22ca54f8e',
    })
    c1.init({
        env: "djcx-ak88-3gjvcbn22ca54f8e"
    })

    c1.callFunction({
        name: 'editcityprice',
        data: {
            id: props._id,
            cityprice: props.cityprice
        },
        success: res => {
            console.log(res);
            getBattery()
        },
        fail: res => {
            console.log(res);
        }
    })
}

const dialogFormVisible3 = ref(false)
const add = () => {
    dialogFormVisible3.value = true
}
const adds = () => {
    console.log(form.value)
    //初始化
    var c1 = new cloud.Cloud({
        //必填，表示是未登录模式
        identityless: true,
        //资源方 AppID
        resourceAppid: 'wx026afb68a8e326e4',
        //资源方环境 ID
        resourceEnv: 'djcx-ak88-3gjvcbn22ca54f8e',
    })
    c1.init({
        env: "djcx-ak88-3gjvcbn22ca54f8e"
    })

    c1.callFunction({
        name: 'addBattery',
        data: {
            _id: form.value._id,
            id: form.value.id,
            size: form.value.size,
            weight: form.value.weight,
            voltage: form.value.voltage,
            yajin: form.value.yajin,
            cityprice: [{
                city: "郑州",
                type: 2,
                yajin: 2,
                taocan: [{
                    price: 2,
                    time: 2
                }]
            }]
        },
        success: res => {
            console.log(res);
            getBattery()
        },
        fail: res => {
            console.log(res);
        }
    })
    dialogFormVisible3.value = false
}

const dialogFormVisible4 = ref(false)
const rows = ref({})
const editMessage3 = (row) => {
    dialogFormVisible4.value = true
    rows.value = row
}
const addss = () => {
    rows.value.cityprice.push(form2.value)
    var c1 = new cloud.Cloud({
        //必填，表示是未登录模式
        identityless: true,
        //资源方 AppID
        resourceAppid: 'wx026afb68a8e326e4',
        //资源方环境 ID
        resourceEnv: 'djcx-ak88-3gjvcbn22ca54f8e',
    })
    c1.init({
        env: "djcx-ak88-3gjvcbn22ca54f8e"
    })

    c1.callFunction({
        name: 'editcityprice',
        data: {
            id: rows.value._id,
            cityprice: rows.value.cityprice
        },
        success: res => {
            console.log(res);
            getBattery()
        },
        fail: res => {
            console.log(res);
        }
    })
    dialogFormVisible4.value = false
}
const resize = () => {
    formInline.value = {
        battery: '',
    }
    getBattery()
}

const del = (row) => {
    console.log(row._id)
    //初始化

    var c1 = new cloud.Cloud({
        //必填，表示是未登录模式
        identityless: true,
        //资源方 AppID
        resourceAppid: 'wx026afb68a8e326e4',
        //资源方环境 ID
        resourceEnv: 'djcx-ak88-3gjvcbn22ca54f8e',
    })
    c1.init({
        env: "djcx-ak88-3gjvcbn22ca54f8e"
    })

    c1.callFunction({
        name: 'delBattery',
        data: {
            name: 'battery',
            id: row._id
        },
        success: res => {
            console.log(res);
            getBattery()
        },
        fail: res => {
            console.log(res);
        }
    })
}

const form3 = ref({
    price: '',
    time: ''
})
const dialogFormVisible5 = ref(false)
const cityprice = ref({})
const citypriceId = ref(0)
const addtaocan = (row, $index, prop) => {
    dialogFormVisible5.value = true
    cityprice.value = row,
        // console.log(prop)
        citypriceId.value = prop
    console.log(cityprice.value)
}
const makesureAdd = () => {
    cityprice.value.taocan.push(form3.value)
    var c1 = new cloud.Cloud({
        //必填，表示是未登录模式
        identityless: true,
        //资源方 AppID
        resourceAppid: 'wx026afb68a8e326e4',
        //资源方环境 ID
        resourceEnv: 'djcx-ak88-3gjvcbn22ca54f8e',
    })
    c1.init({
        env: "djcx-ak88-3gjvcbn22ca54f8e"
    })

    c1.callFunction({
        name: 'editcityprice',
        data: {
            id: citypriceId.value._id,
            cityprice: citypriceId.value.cityprice
        },
        success: res => {
            console.log(res);
            getBattery()
        },
        fail: res => {
            console.log(res);
        }
    })
    dialogFormVisible5.value = false
}

const dialogFormVisible6 = ref(false)
const indexss = ref(0)
const propss = ref({})

const editMessage4 = (row, indexs, prop) => {
    dialogFormVisible6.value = true
    form3.value = row
    console.log(row, indexs, prop)
    console.log(tableData.value)
}
const checkPrice = () => {
    console.log(11)

}
</script>

<template>
    <el-form :inline="true" :model="formInline" class="form">

        <el-form-item label="电池">
            <el-input class="input" v-model="formInline.battery" placeholder="电池" />
        </el-form-item>

        <el-button type="info" class="button" @click="resize">重置</el-button>
        <el-button type="primary" class="button" @click="search">查询</el-button>
    </el-form>
    <el-table :data="tableData" class="list" style="width: 100%">
        <el-table-column type="expand">
            <template #default="props">
                <div class="mid">
                    <el-table :data="props.row.cityprice">
                        <el-table-column type="expand">
                            <template #default="props">
                                <h3>套餐</h3>
                                <el-table :data="props.row.taocan">
                                    <el-table-column type=index label="序号" width="120" />
                                    <el-table-column prop="price" label="价格" width="120" />
                                    <el-table-column prop="time" label="时间" width="120" />
                                    <el-table-column prop="edit" label="操作" width="180">
                                        <template #default="{ row, $index }">
                                            <el-button type="primary" :icon="Edit" circle
                                                @click="editMessage4(row, $index, props.row)" />
                                            <el-button type="danger" :icon="Delete" circle
                                                @click="del3($index, props.row)" />
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </template>
                        </el-table-column>
                        <el-table-column type=index label="序号" width="120" />
                        <el-table-column prop="city" label="城市" width="120" />
                        <el-table-column prop="type" label="类型" width="120" />
                        <el-table-column prop="yajin" label="押金" width="120" />
                        <el-table-column prop="edit" label="操作" width="180">
                            <template #default="{ row, $index }">
                                <el-button type="primary" :icon="Edit" circle
                                    @click="editMessage2(row, $index, props.row)" />
                                <el-button type="danger" :icon="Delete" circle @click="del2($index, props.row)" />
                                <el-button type="success" :icon="Plus" circle @click="addtaocan(row, $index, props.row)" />
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </template>
        </el-table-column>
        <el-table-column type=index label="序号" width="60" />
        <el-table-column prop="voltage" label="型号" width="80" />
        <el-table-column prop="id" label="id" width="60" />
        <el-table-column prop="size" label="size" width="120" />
        <el-table-column prop="weight" label="weight" width="120" />
        <el-table-column prop="yajin" label="押金" width="120" />
        <el-table-column prop="edit" label="操作" width="180">
            <template #default="{ row }">
                <el-button type="primary" :icon="Edit" circle @click="editMessage(row)" />
                <el-button type="danger" :icon="Delete" circle @click="del(row)" />
                <el-button type="success" :icon="Plus" circle @click="editMessage3(row)" />
            </template>
        </el-table-column>
    </el-table>
    <div class="footer">
        <div class="page-num">共{{ tableData.length }}条</div>
        <!-- <el-pagination class="page" background layout="prev, pager, next" :total="1000" /> -->
        <el-button type="primary" class="footerBtn" @click="add">增加</el-button>
    </div>
    <el-dialog v-model="dialogFormVisible" title="修改信息">
        <el-form :model="form">
            <el-form-item label="id" label-width="formLabelWidth">
                <el-input v-model="form.id" autocomplete="off" />
            </el-form-item>
            <el-form-item label="尺寸" label-width="formLabelWidth">
                <el-input v-model="form.size" autocomplete="off" />
            </el-form-item>
            <el-form-item label="型号" label-width="formLabelWidth">
                <el-input v-model="form.voltage" autocomplete="off" />
            </el-form-item>
            <el-form-item label="重量" label-width="formLabelWidth">
                <el-input v-model="form.weight" autocomplete="off" />
            </el-form-item>
            <el-form-item label="押金" label-width="formLabelWidth">
                <el-input v-model="form.yajin" autocomplete="off" />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取消</el-button>
                <el-button type="primary" @click="check">
                    确认
                </el-button>
            </span>
        </template>
    </el-dialog>
    <el-dialog v-model="dialogFormVisible2" title="修改信息">
        <el-form :model="form2">
            <el-form-item label="城市" label-width="formLabelWidth">
                <el-input v-model="form2.city" autocomplete="off" />
            </el-form-item>
            <el-form-item label="型号" label-width="formLabelWidth">
                <el-input v-model="form2.type" autocomplete="off" />
            </el-form-item>
            <el-form-item label="押金" label-width="formLabelWidth">
                <el-input v-model="form2.yajin" autocomplete="off" />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogFormVisible2 = false">取消</el-button>
                <el-button type="primary" @click="check2">
                    确认
                </el-button>
            </span>
        </template>
    </el-dialog>
    <el-dialog v-model="dialogFormVisible3" title="增加信息">
        <el-form :model="form">
            <el-form-item label="id" label-width="formLabelWidth">
                <el-input v-model="form.id" autocomplete="off" />
            </el-form-item>
            <el-form-item label="尺寸" label-width="formLabelWidth">
                <el-input v-model="form.size" autocomplete="off" />
            </el-form-item>
            <el-form-item label="型号" label-width="formLabelWidth">
                <el-input v-model="form.voltage" autocomplete="off" />
            </el-form-item>
            <el-form-item label="重量" label-width="formLabelWidth">
                <el-input v-model="form.weight" autocomplete="off" />
            </el-form-item>
            <el-form-item label="押金" label-width="formLabelWidth">
                <el-input v-model="form.yajin" autocomplete="off" />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取消</el-button>
                <el-button type="primary" @click="adds">
                    确认
                </el-button>
            </span>
        </template>
    </el-dialog>
    <el-dialog v-model="dialogFormVisible4" title="增加信息">
        <el-form :model="form2">
            <el-form-item label="城市" label-width="formLabelWidth">
                <el-input v-model="form2.city" autocomplete="off" />
            </el-form-item>
            <el-form-item label="型号" label-width="formLabelWidth">
                <el-input v-model="form2.type" autocomplete="off" />
            </el-form-item>
            <el-form-item label="押金" label-width="formLabelWidth">
                <el-input v-model="form2.yajin" autocomplete="off" />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogFormVisible4 = false">取消</el-button>
                <el-button type="primary" @click="addss">
                    确认
                </el-button>
            </span>
        </template>
    </el-dialog>
    <el-dialog v-model="dialogFormVisible5" title="增加信息">
        <el-form :model="form3">
            <el-form-item label="价格" label-width="formLabelWidth">
                <el-input v-model="form3.price" autocomplete="off" />
            </el-form-item>
            <el-form-item label="时间" label-width="formLabelWidth">
                <el-input v-model="form3.time" autocomplete="off" />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogFormVisible5 = false">取消</el-button>
                <el-button type="primary" @click="makesureAdd()">
                    确认
                </el-button>
            </span>
        </template>
    </el-dialog>
    <el-dialog v-model="dialogFormVisible6" title="修改信息">
        <el-form :model="form3">
            <el-form-item label="价格" label-width="formLabelWidth">
                <el-input v-model="form3.price" autocomplete="off" />
            </el-form-item>
            <el-form-item label="时间" label-width="formLabelWidth">
                <el-input v-model="form3.time" autocomplete="off" />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogFormVisible6 = false">取消</el-button>
                <el-button type="primary" @click="checkPrice">
                    确认
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>

<style scoped>
.mid {
    margin-left: 10px;
}

.form {
    padding: 20px;

    .button {
        margin-bottom: 18px;
    }
}

.list {
    height: 72vh;
    margin-bottom: 5px;
}

.footer {
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 30px;

    .footerBtn {
        margin-right: 60px;
    }


    .page {
        margin-right: 120px;
    }

    .page-num {
        margin-left: 30px;
    }
}
</style>